<template>
  <div class="wuliu">
    <div class="powertop">
      <router-link class="powertopli " to="/ziliaoku/ziliaoku">全部商品资料库</router-link>
      <router-link class="powertopli " to="/ziliaoku/kefu">专属资料库页面管理</router-link>
    </div>
    <div class="kflex" style=" padding: 20px 20px 0;">



      <el-input v-model="search.title" style="width: 300px; margin-right: 20px; margin-bottom: 20px;"  placeholder="商品名称"></el-input>
      <el-input v-model="search.fetch_code" style="width: 300px; margin-right: 20px; margin-bottom: 20px;"  placeholder="商品编码"></el-input>
      <el-select v-model="search.operator" style="width: 300px;margin-right: 20px; margin-bottom: 20px;" clearable filterable placeholder="请选择运营商">
        <el-option :label="item.name" :value="item.id" v-for="item in sanlist" :key="item.id"></el-option>
      </el-select>
      <el-select v-model="search.update_by" style="width: 300px;margin-right: 20px; margin-bottom: 20px;" clearable filterable placeholder="请选择修改人">
        <el-option :label="item.name" :value="item.name" v-for="item in rens" :key="item.id"></el-option>
      </el-select>
      <el-cascader @change="changeaddress" style="width: 300px;margin-right: 20px; margin-bottom: 20px;" v-model="diqu" :options="citylist" placeholder="请选择归属地"></el-cascader>

      <el-select v-model="search.edit_status" style="width: 300px;margin-right: 20px; margin-bottom: 20px;" clearable filterable placeholder="请选择编辑状态">
        <el-option label="未编辑" :value="0"></el-option>
        <el-option label="已编辑" :value="1"></el-option>
      </el-select>

      <el-select v-model="search.status" style="width: 300px;margin-right: 20px; margin-bottom: 20px;" clearable filterable placeholder="请选择上下架状态">
        <el-option label="上架" :value="100"></el-option>
        <el-option label="下架" :value="0"></el-option>
      </el-select>

      <el-date-picker v-model="times" @change="changetimes" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" style=" margin-bottom: 20px; margin-right: 20px;" :default-time="['00:00:00', '23:59:59']"
        range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-button round @click="qingkong()" plain type="danger" style=" margin-bottom: 20px;">清空</el-button>
      <el-button round @click="dosearch()" type="danger" style=" margin-bottom: 20px;">查询</el-button>
    </div>



    <div v-loading='loading' style="padding: 20px;">
      <!-- <div class="kflexc mb20">
        <el-button type="danger" round style="margin-right: 20px;">批量修改资料库分组</el-button>
      </div> -->
      <el-table :data="list" border style="width: 100%; margin: 0 0 20px 0;" ref="multipleTable" >
        <el-table-column align='center' prop='title' label="商品名称">
          <template slot-scope="scope">
            <div class="kflexcc">
              <div style="position: relative; padding-right: 10px;">{{scope.row.title}}
                <div v-if="scope.row.is_update == 1" style="position: absolute; right: -5px; top: 10px; width: 5px; height: 5px;  border-radius: 5px; background: #f00;"></div>
              </div>


            </div>

          </template>
        </el-table-column>
        <el-table-column align='center' prop='fetch_code' label="商品编码"></el-table-column>
        <el-table-column align='center' prop='operator_lable' label="运营商"></el-table-column>
        <el-table-column align='center'  label="归属地">
          <template slot-scope="scope">
            {{scope.row.province}}{{scope.row.city}}
          </template>
        </el-table-column>
        <el-table-column align='center'  label="编辑状态">
          <template slot-scope="scope">
            <div v-if="scope.row.edit_status == 0" style="color: #f00;">未编辑</div>
            <div v-if="scope.row.edit_status == 1">已编辑</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='update_by' label="修改人"></el-table-column>
        <el-table-column align='center' prop='updated_at' label="更新时间"></el-table-column>
        <el-table-column align='center' prop='status_lable' label="上下架状态"></el-table-column>
        <el-table-column align='center' label="操作" width="350px">
          <template slot-scope="scope">
            <div class="kflexcc" style="color: #409EFF;">
              <div style="margin: 10px; cursor: pointer;" @click="bianji(scope.row)">编辑</div>
              <!-- <div style="margin: 10px; cursor: pointer;" @click="chakan(scope.row)">查看</div> -->
              <div style="margin: 10px; cursor: pointer;" @click="tianjiadao(scope.row)">添加到专题页</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>

    <el-dialog title="添加到主播商品页" :visible.sync="log" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">专题页</div>
          <div>
            <el-select v-model="all.group_id"  style="width: 300px;" clearable placeholder="请选择专题页">
                <el-option v-for="(item,index) in yemians" :key="index" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">商品名称</div>
          <div>
            <el-select v-model="all.id" disabled style="width: 300px;" clearable placeholder="请选择商品">
                <el-option v-for="(item,index) in shangpins" :key="index" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">自定义商品名称</div>
          <div><el-input v-model="all.title" @input="test" style="width: 300px;" placeholder="请输入自定义商品名称"></el-input></div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">口播话术</div>
          <div><el-input type="textarea" v-model="all.play_info" rows="5" style="width: 600px;" placeholder="请输入口播话术"></el-input></div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">注意点</div>
          <div><el-input type="textarea" v-model="all.alert_info" rows="5" style="width: 600px;" placeholder="请输入注意点"></el-input></div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">详情图</div>
          <div>
            <chuantuduo ref="chuantuduo" @getimg="getimg" :imgs="all.yy_image" v-if="relo"></chuantuduo>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button round @click="log = false">取消</el-button>
        <el-button type="danger" round @click="addgo">确定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import {
  	provinceAndCityData,
  	CodeToText,
  	TextToCode
  } from 'element-china-area-data'
  import chuantu from "@/components/zujian/chuantu.vue";
  import chuantuduo from "@/components/zujian/chuantuduo.vue";
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    name: "wuliu",
    components:{
      chuantu,chuantuduo
    },
    data() {
      return {
        citylist: provinceAndCityData,
        loading:false,
        list:"",
        sanlist: [
         //  {name: "中国联通",	id: 10010},
        	// {name: "中国移动",	id: 10086},
        	// {name: "中国电信", id: 10000},
        	{name: "中国广电", id:10099},
        	// {name: "虚拟运营商",id: 11111}
        ],
        search:{
          page:1,
          page_size:20,

          start: "",
          end:"",
          edit_status:"",// 编辑状态  1已编辑  0 为编辑
          update_by:"",// 修改人，人名
          status: 100,//  上下架状态，100上架，下架用0

          title:"",
          parent_name:"",
          fetch_code:"",
          operator:"",

          province:"",
          city:""
        },
        times:[],
        diqu:[],
        total:0,
        shopid:'',

        log:false,
        all:{
          group_id:"",
          id:"",
          title:"",
          play_info:"",
          alert_info:"",
          yy_image:""
        },
        yemians:[],
        shangpins:[],
        rens:[],
        relo:false
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getlist()
      //获取当前年月
      // this.getNowDate()
      // console.log(this.vsdate())


    },
    mounted() {

      axios.get('/api/gth/information/groupsListAll')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.yemians = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      axios.get('/api/gth/information/infoEditList')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.shangpins = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      axios.get('/api/gth/information/getEditList')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.rens = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

    },
    methods: {
      getimg:function(val){
        this.all.yy_image = val.toString()
      },
      test:function(){
        console.log(this.all)
      },
      tianjiadao:function(item){
        axios.get('/api/gth/information/getInfoToGroup?id='+item.id)
          .then(response => {
            if (response.data.msg.code == 0) {

              this.all = {
                group_id:"",
                id:item.id,
                title:response.data.data.title,
                play_info:response.data.data.play_info,
                alert_info:response.data.data.alert_info,
                yy_image:response.data.data.yy_image
              }

              this.log = true
              this.relo = false
              this.$nextTick(()=>{
                this.relo = true
              })
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

        // this.all = {
        //   group_id:"",
        //   id:item.id,
        //   title:"",
        //   play_info:"",
        //   alert_info:"",
        //   yy_image:""
        // }
        // this.log = true

        // this.relo = false
        // this.$nextTick(()=>{
        //   this.relo = true
        // })


      },
      changetimes:function(val){
        if(val == null){
          this.all.start = this.times[0]
          this.all.end = this.times[1]
        }else{
          this.all.start = ""
          this.all.end = ""
        }
      },
      bianji:function(item){
        this.$router.push('/ziliaoku/shop_detail?id='+item.id+'&bianji=true')
      },
      chakan:function(item){
        this.$router.push('/ziliaoku/shop_detail?id='+item.id)
      },

      addgo:function(){
        axios.post('/api/gth/information/addInfoToGroup',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //选择省市区
      changeaddress: function(v) {
        this.diqu = v

      	this.search.province = CodeToText[v[0]],
      	this.search.city = CodeToText[v[1]]
      },
      readExcel1(files) {
        return new Promise((res, rej) => {
          var that = this;
          if (files.length <= 0) {
            return;
          }
          if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
            this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
            return;
          }
          const fileReader = new FileReader();
          fileReader.onload = (ev) => {
            try {
              const data = ev.target.result;
              const workbook = read(data, {
                type: 'binary'
              });
              // 取第一张表
              const wsname = workbook.SheetNames[0];
              // 生成json表格内容
              const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
              console.log(ws);
              // 后续为自己对ws数据的处理
              res(ws)
            } catch (e) {
              return false;
              rej(e)
            }
          };
          fileReader.readAsBinaryString(files[0]);
        })

      },

      uploasd2(file, fileList) {
        var that = this
        let files = {
          0: file
        }
        let data = []

        let ff = this.readExcel1(files);
        ff.then((res) => {
          res.forEach(item => {
            data.push(item['订单ID'])
          })
          axios.post('/api/plan-market/order/track/export',{ids:data})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`导入成功`);
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //统计
      qingkong:function(){
        this.diqu = []
        this.times = []
        this.search = {
          page:1,
          page_size:20,

          start: "",
          end:"",
          edit_status:"",// 编辑状态  1已编辑  0 为编辑
          update_by:"",// 修改人，人名
          status: 100,//  上下架状态，100上架，下架用0

          title:"",
          parent_name:"",
          fetch_code:"",
          operator:"",

          province:"",
          city:""
        }
      },
      dosearch: function() {
        this.search.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/gth/information/list',{params:this.search})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //下载模板
      xiazai: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '导入物流模板.xlsx');
        a.setAttribute('href',location.origin + location.pathname + 'static/daoruwuliu.xlsx');
        a.click();
      },

      //真下载
      xiazai2: function(dizhi) {
        var a = document.createElement('a');
        a.setAttribute('href', dizhi);
        a.click();
      },


    }
  }
</script>

<style lang="scss" scoped>
  .wuliu {
    .powertop {
    	display: flex;
    	background:#f4f4f4;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;

    	color: #727272;
    	// border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;

      border-top: 3px #f4f4f4 solid;
    }

    .router-link-active {
    	background: #FFFFFF;  color: #2974FF !important;
      position: relative;
      border-top: 3px #2974FF solid !important ;
    //   &::after{
    //   content: '';
    //   display: block;
    //   position: absolute;
    //   left: 50%;
    //   bottom: 0;
    //   margin-left: -15px;
    //   width: 30px;
    //   height: 6px;
    //   border-radius: 10px;
    //   background: #2974FF;
    // }
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-textarea__inner{ background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
